<script setup>
import { useI18n } from 'vue-i18n'
import tipButton from '@/components/customButton/tipButton.vue'

const { t } = useI18n()

const model = ref({
  name: '',
  location: 0,
  planType: 0,
  cycle: 0,
  time: 0,
  week: 1,
  timestamp: 0,
  port: null
})

const data = Array.from({ length: 46 }).map((_, index) => ({
  name: `Edward King ${index}`,
  age: 32,
  address: `London, Park Lane no. ${index}`
}))

const goDetail = (row) => {
  router.push({
    path: '/home/device/deviceDetail'
  })
}

const columns = computed(() => {
  return [
    {
      title: 'ID',
      key: 'name',
      fixed: 'left'
    },
    {
      title: t('system.createTime'),
      key: 'version'
    },
    {
      title: t('service.backupLocation'),
      key: 'model'
    },
    {
      title: t('service.backupTimeSettings'),
      key: 'belong'
    },
    {
      title: t('system.operation'),
      key: 'state',
      fixed: 'right',
      render: (row) => {
        return [
          h(
            tipButton,
            {
              btnProps: {
                quaternary: true,
                type: 'Error'
              },
              btnText: t('system.delete'),
              text: t('system.deleteTip'),
              onComfirmHandle: () => {
                console.log('dinjil')
              },
              style: {
                marginRight: '2px'
              }
            },
            {}
          )
        ]
      }
    }
  ]
})

const checkedRowKeysRef = ref([])
const handleCheck = (rowKeys) => {
  checkedRowKeysRef.value = rowKeys
}
</script>

<template>
  <div class="px-4">
    <n-card>
      <n-form ref="formRef" :model="model">
        <div class="w-full flex items-center flex-wrap">
          <n-form-item
            path="name"
            :label="t('service.backupLocation')"
            class="w-full md:w-1/2 lg:w-1/3 xl:w-1/4 2xl:w-1/5 px-2 box-border"
          >
            <n-select
              v-model:value="model.location"
              :options="[
                { label: t('service.location'), value: 0 },
                { label: t('service.remote'), value: 1 }
              ]"
            />
          </n-form-item>
          <n-form-item
            path="name"
            :label="t('service.path')"
            class="w-full md:w-1/2 lg:w-1/3 xl:w-1/4 2xl:w-1/5 px-2 box-border"
          >
            <n-input />
          </n-form-item>
          <n-form-item
            path="name"
            :label="t('permission.userName')"
            class="w-full md:w-1/2 lg:w-1/3 xl:w-1/4 2xl:w-1/5 px-2 box-border"
            v-if="model.location == 1"
          >
            <n-input />
          </n-form-item>
          <n-form-item
            path="name"
            :label="t('permission.password')"
            class="w-full md:w-1/2 lg:w-1/3 xl:w-1/4 2xl:w-1/5 px-2 box-border"
            v-if="model.location == 1"
          >
            <n-input />
          </n-form-item>
          <n-form-item
            path="port"
            :label="t('alarm.port')"
            class="w-full md:w-1/2 lg:w-1/3 xl:w-1/4 2xl:w-1/5 px-2 box-border"
            v-if="model.location == 1"
          >
            <n-input-number v-model:value="model.port" clearable />
          </n-form-item>
        </div>
        <div class="w-full flex items-center flex-wrap">
          <n-form-item
            path="time"
            :label="t('service.planType')"
            class="w-full md:w-1/2 lg:w-1/3 xl:w-1/4 2xl:w-1/5 px-2 box-border"
          >
            <n-select
              v-model:value="model.planType"
              :options="[
                { label: t('service.immediateBackup'), value: 0 },
                { label: t('service.timedBackup'), value: 1 }
              ]"
            />
          </n-form-item>
          <n-form-item
            path="time"
            :label="t('service.cycle')"
            class="w-full md:w-1/2 lg:w-1/3 xl:w-1/4 2xl:w-1/5 px-2 box-border"
            v-if="model.planType == 1"
          >
            <n-select
              v-model:value="model.cycle"
              :options="[
                { label: t('service.everyDay'), value: 0 },
                { label: t('service.everyWeek'), value: 1 },
                { label: t('service.customize'), value: 2 }
              ]"
            />
          </n-form-item>
          <n-form-item
            path="time"
            :label="t('service.week')"
            class="w-full md:w-1/2 lg:w-1/3 xl:w-1/4 2xl:w-1/5 px-2 box-border"
            v-if="model.cycle == 1 && model.planType == 1"
          >
            <n-select
              v-model:value="model.week"
              :options="[
                { label: t('service.Monday'), value: 1 },
                { label: t('service.Tuesday‌'), value: 2 },
                { label: t('service.Wednesday‌'), value: 3 },
                { label: t('service.Thursday'), value: 4 },
                { label: t('service.Friday'), value: 5 },
                { label: t('service.Saturday'), value: 6 },
                { label: t('service.Sunday'), value: 7 }
              ]"
            />
          </n-form-item>
          <n-form-item
            path="time"
            :label="t('service.time')"
            class="w-full md:w-1/2 lg:w-1/3 xl:w-1/4 2xl:w-1/5 px-2 box-border"
            v-if="model.planType == 1"
          >
            <n-time-picker
              default-formatted-value="00:12:13"
              class="w-full"
              v-model:value="model.time"
              v-if="model.cycle != 2"
            />
            <n-date-picker
              v-model:value="model.timestamp"
              type="datetime"
              class="w-full"
              clearable
              v-if="model.cycle == 2"
            />
          </n-form-item>
        </div>
      </n-form>
      <div class="flex justify-end">
        <n-button type="primary">{{ t('service.addTask') }}</n-button>
      </div>
    </n-card>
    <div class="mt-4">
      <n-data-table
        :columns="columns"
        :data="data"
        :pagination="{ pageSize: 5 }"
        :row-key="(row) => row.address"
        @update:checked-row-keys="handleCheck"
        :scroll-x="600"
      />
    </div>
  </div>
</template>

<style scoped></style>
